<template>
  <div>
    <a-drawer :visible="modalVisible" title="选择规格参数项" width="550" @close="handleClose">
      <f-search-form :more="false" @searchHandler="searchHandler">
        <f-search-form-item label="规格名称" name="specsName" style="width: 250px"/>
      </f-search-form>
      <f-table ref="table" size="default" rowKey="specsId" :columns="columns" :operator="operator" :params="queryParam" :api="api.specs" :showMultipleBtn="false">
      </f-table>
      <div class="drawer-footer">
        <a-button type="default" @click="handleClose">取消</a-button>&nbsp;
        <a-button type="primary" @click="handleSubmit">确定</a-button>
      </div>
    </a-drawer>
  </div>
</template>

<script>

  export default {
    name: 'specsSelect',
    components: {},
    data () {
      return {
        //列表初始化查询参数
        queryParam: {},
        item: {},
        modalVisible: false,
        // 表头
        columns: [
          {
            title: '规格名称',
            dataIndex: 'specsName'
          }
        ],
        //操作按钮
        operator: []
      }
    },
    created () {

    },
    methods: {
      handleShow (item) {
        this.item = item
        this.modalVisible = true

      },
      handleClose () {
        this.modalVisible = false
      },
      handleSubmit () {
        let selectObj = this.$refs.table.getSelectedRows()
        selectObj.forEach(({ specsId, specsName, specsOption, specsType, sku }) => {
          this.item.push({
            'id': specsId,
            'k': specsName,
            'searchable': true,
            'type': specsType,
            'allowDel':false,
            'sku': sku,
            'selected':[],
            'options': JSON.parse(specsOption),
            'numerical': true,
            'unit': ''
          })
        })

        console.log(this.$refs.table.getSelectedRows())
      }
    }
  }
</script>
